<template>
  <!-- 客户端详情对话框 -->
  <el-dialog title="客户端详情" v-model="dialog.visible" width="900px" append-to-body>
    <el-descriptions :column="2" border v-if="dialog.data">
      <el-descriptions-item label="客户端ID">{{ dialog.data.clientId }}</el-descriptions-item>
      <el-descriptions-item label="客户端名称">{{ dialog.data.clientName }}</el-descriptions-item>
      <el-descriptions-item label="客户端类型">
        <el-tag :type="getClientTypeTag(dialog.data.clientType)">{{ getClientTypeText(dialog.data.clientType) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="连接状态">
        <el-tag :type="getStatusTag(dialog.data.status)">{{ getStatusText(dialog.data.status) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="IP地址">{{ dialog.data.ipAddress }}</el-descriptions-item>
      <el-descriptions-item label="端口">{{ dialog.data.port }}</el-descriptions-item>
      <el-descriptions-item label="协议类型">
        <el-tag type="info">{{ dialog.data.protocol }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="认证方式">
        <el-tag :type="getAuthTypeTag(dialog.data.authType)">{{ getAuthTypeText(dialog.data.authType) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="订阅主题" :span="2">
        <div v-if="dialog.data.subscribeTopics && dialog.data.subscribeTopics.length > 0">
          <el-tag v-for="topic in dialog.data.subscribeTopics" :key="topic" type="success" size="small" style="margin-right: 8px; margin-bottom: 4px;">
            {{ topic }}
          </el-tag>
        </div>
        <span v-else style="color: #909399;">暂无订阅主题</span>
      </el-descriptions-item>
      <el-descriptions-item label="发布主题" :span="2">
        <div v-if="dialog.data.publishTopics && dialog.data.publishTopics.length > 0">
          <el-tag v-for="topic in dialog.data.publishTopics" :key="topic" type="warning" size="small" style="margin-right: 8px; margin-bottom: 4px;">
            {{ topic }}
          </el-tag>
        </div>
        <span v-else style="color: #909399;">暂无发布主题</span>
      </el-descriptions-item>
      <el-descriptions-item label="连接时间">{{ dialog.data.connectTime }}</el-descriptions-item>
      <el-descriptions-item label="最后心跳">{{ dialog.data.lastHeartbeat }}</el-descriptions-item>
      <el-descriptions-item label="数据流量">{{ dialog.data.dataFlow }} KB</el-descriptions-item>
      <el-descriptions-item label="消息数量">{{ dialog.data.messageCount || 0 }}</el-descriptions-item>
      <el-descriptions-item label="QoS等级">
        <el-tag :type="getQosTag(dialog.data.qosLevel)" size="small">{{ getQosText(dialog.data.qosLevel) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="保持连接">{{ dialog.data.keepAlive || 60 }}秒</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ dialog.data.createTime }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ dialog.data.updateTime || dialog.data.createTime }}</el-descriptions-item>
      <el-descriptions-item label="备注" :span="2">{{ dialog.data.remark || '无' }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script setup name="ClientDetailDialog" lang="ts">
import { reactive, watch } from 'vue'

// 定义组件属性
interface Props {
  visible: boolean
  data: any
}

// 定义事件
interface Emits {
  (e: 'update:visible', value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 对话框状态
const dialog = reactive({
  visible: false,
  data: null
})

// 监听props变化
watch(() => props.visible, (newVal) => {
  dialog.visible = newVal
})

watch(() => props.data, (newVal) => {
  dialog.data = newVal
})

watch(() => dialog.visible, (newVal) => {
  emit('update:visible', newVal)
})

// 获取客户端类型标签样式
const getClientTypeTag = (type: string) => {
  switch (type) {
    case 'device': return 'primary'
    case 'app': return 'success'
    case 'gateway': return 'warning'
    case 'third_party': return 'info'
    default: return 'primary'
  }
}

// 获取客户端类型文本
const getClientTypeText = (type: string) => {
  switch (type) {
    case 'device': return '设备客户端'
    case 'app': return '应用客户端'
    case 'gateway': return '网关客户端'
    case 'third_party': return '第三方客户端'
    default: return '未知'
  }
}

// 获取状态标签样式
const getStatusTag = (status: string) => {
  switch (status) {
    case '1': return 'success'
    case '0': return 'danger'
    case '2': return 'warning'
    default: return 'info'
  }
}

// 获取状态文本
const getStatusText = (status: string) => {
  switch (status) {
    case '1': return '在线'
    case '0': return '离线'
    case '2': return '异常'
    default: return '未知'
  }
}

// 获取认证方式标签样式
const getAuthTypeTag = (type: string) => {
  switch (type) {
    case 'username_password': return 'primary'
    case 'certificate': return 'success'
    case 'token': return 'warning'
    case 'none': return 'info'
    default: return 'primary'
  }
}

// 获取认证方式文本
const getAuthTypeText = (type: string) => {
  switch (type) {
    case 'username_password': return '用户名密码'
    case 'certificate': return '证书认证'
    case 'token': return 'Token认证'
    case 'none': return '无认证'
    default: return '未知'
  }
}

// 获取QoS等级标签样式
const getQosTag = (level: number) => {
  switch (level) {
    case 0: return 'info'
    case 1: return 'warning'
    case 2: return 'danger'
    default: return 'info'
  }
}

// 获取QoS等级文本
const getQosText = (level: number) => {
  switch (level) {
    case 0: return 'QoS 0 (最多一次)'
    case 1: return 'QoS 1 (至少一次)'
    case 2: return 'QoS 2 (恰好一次)'
    default: return 'QoS 0 (最多一次)'
  }
}
</script>

<style scoped>
/* 组件样式 */
</style>